<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="handleClick">发布</button>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        let vm=new Vue({
            // 组件挂载到DOM上时
            mounted(){
                // $on 注册了事件test
                // 以下是发布-订阅模式，是完全解耦的；而观察者模式是存在耦合性的
                this.$on("test",function(msg){
                    console.log("朋友1接收到了消息",msg);
                })
                this.$on("test",function(msg){
                    console.log("朋友2接收到了消息",msg);
                })
                this.$on("test",function(msg){
                    console.log("朋友3接收到了消息",msg);
                })
            },
            el:"#app",
            methods:{
                handleClick:function(){
                    this.$emit("test","hhhh")
                }
            }
        })







    </script>
</body>
</html>